<template>
	<view class="main-cont">
		<view class="top box box-align-center box-pack-center">
			<!-- <view class="avar">
				<u-avatar :src="user.icon" mode="circle" size="164"></u-avatar>
			</view> -->
			<u-button shape="circle" :custom-style="userInfo" @click="getUserProfile" :ripple="true">
				<view class="icon">
					<u-avatar :src="userinfo.icon" mode="circle" size="164" style="display: flex;"></u-avatar>
				</view>
			</u-button>
		</view>

		<view class="info">
			<view class="list">
				<view class="">
					姓名
				</view>
				<view class="">
					{{user.name}}
				</view>
			</view>
			<view class="list">
				<view class="">
					身份
				</view>
				<view v-if="role=='team'"> 劳动教育服务团队 </view>
				<view v-if="role=='admin'"> 学校管理员 </view>
				<view v-if="role=='tr'"> 教师 </view>
				<view v-if="role=='stu'"> 学生 </view>
			</view>
			<view class="list" v-if="role!='stu'">
				<view class="">
					职工号
				</view>
				<view class="">
					{{user.zgh==null?"暂无职工号":user.zgh}}
				</view>
			</view>
			<view class="list" v-if="role=='stu'">
				<view class="">
					学号
				</view>
				<view class="">
					{{user.xh==null?"暂无学号":user.xh}}
				</view>
			</view>
			<view class="list">
				<view class="">
					学校
				</view>
				<view class="">
					<!-- {{user.schoolName}} -->
					{{currSchool.name==null?"暂无学号":currSchool.name}}
				</view>
			</view>
		</view>
		<view class="phone box box-align-center">
			<view class="list box box-align-center box-pack-between">
				<view class="">
					手机号
				</view>
				<!-- <view class="" v-if="user.mobile !=''">
					{{user.mobile}}
				</view> -->
				<u-button size="medium" class="btn btn-open" open-type="getPhoneNumber" :ripple="true"
					@getphonenumber="getPhoneNumber" :custom-style="customStyle">
					{{user.mobile !=''?user.mobile:`获取手机号`}}</u-button>

			</view>
		</view>
		<view class="box box-pack-center box-align-center">
			<u-button size="medium" @click="save">绑定</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				customStyle: {
					background: "",
					padding: '0'
				},
				user: {
					mobile: ''
				},
				role: uni.getStorageSync('role'),
				icon: "https://yhykt.oss-cn-beijing.aliyuncs.com/4400AD0E6ABC4959B732A0951A0F3724%E7%AE%A1%E7%90%86%E5%91%98.png?Expires=4743720281&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=nhGCg9ceeCNLsyGsqgG0C6xhL3U%3D",
				openid: '',
				unionid: '',
				userinfo: {
					icon: '',
					nickname: ''
				}, //微信用户信息对象
				userInfo: {
					width: "82px !important",
					height: "82px !important",
					border: "none"
				},
				currSchool: uni.getStorageSync("currSchool")
			}
		},
		onLoad(opt) {
			this.user = uni.getStorageSync('user')
			console.log(this.user, '个人信息===============');
			this.userinfo.icon = this.user.icon
			this.getUnionidOnly()
		},
		methods: {
			getUserProfile(e) {

				this.selecticon = true;
				uni.getUserProfile({
					desc: '用于更改个人信息',
					success: (res) => {
						console.log(res);
						this.userinfo.icon = res.userInfo.avatarUrl;
						this.userinfo.nickname = res.userInfo.nickName;
					}
				})
			},
			getUnionidOnly() {
				wx.login({
					success: res => {
						this.$api.post({
							url: '/comm/getAppletUnionid'
						}, {
							code: res.code
						}).then(s => {
							console.log(s, 's--------------------------')
							this.openid = s.openid;
							this.unionid = s.unionid;
							// this.icon = s.user.icon
						})
					}
				})
			},
			//获取手机号
			getPhoneNumber(e) {
				uni.login({
					provider: 'weixin',
					success: (res) => {

						let opts = {
							url: '/comm/getPhoneFromApplet',
							method: 'post'
						};
						let param = {
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv,
							code: res.code
						};
						this.$api.post(opts, param).then(resp => {
							console.log(resp);
							this.user.mobile = resp.phoneNumber;
							let params = {
								id: this.user.id,
								mobile: resp.phoneNumber
							};
							// this.updateUser(params);
						})
					},
					fail: (error) => {
						console.log(error);
					}
				})
			},
			chooseImg() {
				let _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						_this.uploadfile(res.tempFilePaths[0]);
						_this.$nextTick((resp => {
							_this.user.icon = res.tempFilePaths[0]
						}))
					}
				});
			},
			save() {
				console.log(this.user.mobile == `undefined`, this.openid);
				if (this.user.mobile == `undefined`) {
					console.log(this.user.mobile == `undefined`);
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none'
					})
					return
				} else if (this.openid == '' || this.openid == null || this.openid == undefined) {
					uni.showToast({
						title: '请点击头像获取用户信息',
						icon: 'none'
					})
					return
				} else {
					let opts = {
						url: '/sysuser/wxbind',
						method: 'post'
					};
					let params = {
						mobile: this.user.mobile,
						unionid: this.unionid,
						appletOpenid: this.openid,
						userid: this.user.id,
						nickname: this.user.name,
						icon: this.userinfo.icon
					}
					this.$api.post(opts, params).then(res => {
						console.log(res);
						this.updateUser()
						if (res.status == 1) {
							uni.showToast({
								title: "绑定成功",
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: "该用户已绑定",
								icon: 'none'
							})
						}

					})
				}

			},
			uploadfile(file) {
				var _this = this;
				// console.log(_this.$api.baseUrl)
				uni.uploadFile({
					url: _this.$api.baseUrl + '/upload/uploadfile',
					filePath: file,
					name: 'file',
					success: (uploadFileRes) => {
						const resdata = JSON.parse(uploadFileRes.data);
						_this.user.icon = resdata.body.data.url;
						let params = {
							id: _this.user.id,
							icon: resdata.body.data.url
						};
						_this.updateUser(params);
					}
				});
			},
			updateUser() {
				let opts = {
					url: '/sysuser/modify',
					method: 'post'
				};
				let params = {
					id: this.user.id,
					icon: this.userinfo.icon
				};
				this.$api.post(opts, params).then(res => {
					uni.setStorageSync("user", this.user);
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.main-cont {

		.top {
			height: 236rpx;
		}

		.info {
			margin: 0 14rpx;
			width: 722rpx;
			height: 403rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
		}

		.phone {
			margin: 40rpx 14rpx;
			width: 722rpx;
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 8rpx;

			.list {
				width: 100%;
			}
		}

		.list {
			padding: 0 48rpx;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #F0F1F8;

			&:last-child {
				border: none;
			}
		}
	}
</style>